<%@page import="java.util.Collections"%>
<%@page import="models.AdsDealModel"%>
<%@page import="data.AdsDealData"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Calendar"%>
<%@page import="models.GeoModel"%>
<%@page import="admin.data.GeoData"%>
<%@page import="com.google.appengine.api.blobstore.BlobKey"%>
<%@page import="com.google.appengine.api.images.ImagesServiceFactory"%>
<%@page import="com.google.appengine.api.images.ImagesService"%>
<%@page import="java.util.Locale"%>
<%@page import="java.text.NumberFormat"%>
<%@page import="models.DealModel"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	DealModel deal = (DealModel)request.getAttribute("deal");
	ImagesService imagesService = ImagesServiceFactory.getImagesService(); 	
	NumberFormat nf = NumberFormat.getNumberInstance(Locale.GERMAN);      
%>
<jsp:include page="/layouts/header.jsp">
	<jsp:param name="language" value="1" />	
</jsp:include>	 
<%
	if(deal!=null){
%>
<link rel="stylesheet" href="/css/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/nivo-slider.css" />
<script type="text/javascript" src="/js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCg8sM1lg5VBMQDUL-a0VlzvOF7yL3PKgs&sensor=true"></script>
        	<div id="content_inner">
        		<ul class="topProduct clearafter">
        		<%        			
        			List<DealModel> listAd =  AdsDealData.getListDealByType("top");        			
        			if(listAd!=null&&listAd.size()>0){
        				Collections.reverse(listAd);
        				for(DealModel ad : listAd){        					
        					String img = ad.getImageDeal().split(",")[0];
        					img = img.replaceAll(",", "");
                			BlobKey blobKey = new BlobKey(img);
        		%>
                	<li>
                    	<a href="/<%=ad.getDealId()%>/<%=ad.getAlias()%>.html">
                    		<img src="<%=imagesService.getServingUrl(blobKey) %>"  data-thumb="<%=imagesService.getServingUrl(blobKey) %>"  alt="img" title="<%=ad.getShortName() %>" class="img-full-width" />                        	
                            <span class="priceProductTop">
                            	<span class="priceProductTop_inner">
									<%=nf.format(ad.getPriceDiscount()) %>VND
                                </span>
                            </span>
                        </a>
                    </li>
                 <%
        				}
        			}
                 %>
                </ul>
                <jsp:include page="/elements/list_category.jsp"/>
            	<div id="productDetailInfo" class="clearafter">
                	<div class="left">                    	
                    	<div class="productMainInfo clearafter">
                        	<h1><%=deal.getName() %></h1>
                        	<%                        		
                        		int less =  (deal.getPrice() - deal.getPriceDiscount());
                        		int discount = less*100/deal.getPrice();
                        	%>
                        	<div class="left">                            
                                <div class="dealBuy">
                                    <div class="newPrice">
                                        <%=nf.format(deal.getPriceDiscount()) %> đ
                                    </div>
                                    <div class="oldPrice content-center">                                        	
                                        <strong>Giá gốc: <span style="text-decoration: line-through;"><%=nf.format(deal.getPrice()) %> VNĐ</span></strong>                                        
                                        <form method="post" action="">
                                            <a <%=(deal.getStatus()==2&&deal.getAmount()!=deal.getLimit())?"":"onclick='return false;'"%> href="/dang-ky-mua-hang/<%=deal.getDealId() %>" class="button green viewProduct <%=(deal.getStatus()==2&&deal.getUserAmount()!=deal.getLimit())?"":"disable"%>"><span class="icon-cart">Mua</span></a>
                                        </form>
                                    </div>
                                    <div class="dealDiscountBox">
                                        <div>
                                            <span>Giảm:</span>
                                            <strong class="redColor"><%=discount%>%</strong>
                                        </div>                                        
                                    </div>
                                </div>
                                <div class="shadow"></div>
                                <div class="dealBox status content-center">
                                	<%
                                		if(deal.getStatus()==2&&deal.getUserAmount()!=deal.getLimit()){
                                	%>
                                    Số người mua 
                                    <strong><%=deal.getAmount() %></strong>                                    
                                    <%
                                		}else{
                                			%>
                                	Hết hạn mua. 
                                			<%
                                		}
                                    %>
                                </div>
                            </div>
                            <div class="right">
                            	<div class="slideShow">
                            	<%
                                		String img = "";
                                		if(deal.getImageSlideshow()!=null&&deal.getImageSlideshow().length()>0){                                		
                                		%>
                                		<div class="slider-wrapper theme-default">
                                			<%
                                				if(deal.getStatus() == 3){
                                			%>
                                				<div class="notifiDeal-end"></div>
                                			<%
                                				}else if(deal.getUserAmount()==deal.getLimit()){
                                			%>
                                				<div class="notifiDeal-emty"></div>	
                                			<%
                                				}
                                			%>                             			
	                                        <div id="slider" class="nivoSlider">	                                        
                                		<%
                                			String[] split = deal.getImageSlideshow().split(",");
                                			List<String> listImageKey = new ArrayList<String>();
                                			if(split.length>0){
                                				for(int i=0; i<split.length;i++){                                					
                                					BlobKey blobKey = new BlobKey(split[i]);                                								                                        	
			                                        %>
			                                        	<img src="<%=imagesService.getServingUrl(blobKey) %>"  data-thumb="<%=imagesService.getServingUrl(blobKey) %>"  alt="<%=deal.getShortName() %>" title="<%=deal.getShortName() %>" />			                                   
                                					<%
                                					
                                				}	
                                			}else{
                                				img = deal.getImageDeal();
                                				BlobKey blobKey = new BlobKey(img);
                                				%>
                                					<img src="<%=imagesService.getServingUrl(blobKey) %>"  data-thumb="<%=imagesService.getServingUrl(blobKey) %>"  alt="img" title="img" />
                                				<%
                                			}                                	                                			
                                			%>	
                               				     </div>
		                                    </div>                                				
                                			<%
                                		}else if(deal.getImageDeal()!=null&&deal.getImageDeal().length()>0){
                                			String[] split = deal.getImageDeal().split(",");
                                			if(split.length>0){
                                				img = split[0];			
                                			}else{
                                				img = deal.getImageDeal();
                                			}
                                	
                                			BlobKey blobKey = new BlobKey(img);
                                			%>
                                				<img src="<%=imagesService.getServingUrl(blobKey) %>" alt="img" title="img" />                                				
                                			<%
                                		}                                			
                                	%>
                            		
                                </div>                                                                                            
                            </div>
                            <div class="clearbreak"></div>                         
                            <div class="bottom clearafter">
                                <div class="left" id="timeLeft">                                        
                                        Thời gian còn lại: 
	                                   	<strong id="hours"></strong>
	                                    <br />
	                                    <strong id="minutes"></strong>
	                                    <br />
	                                    <strong id="second"></strong>    
	                                  </div>
	                                  	<%
		                                  	Calendar cal = Calendar.getInstance();
		                                  	cal.setTime(deal.getEndTime());
	                               		%>                               
	                               <script type="text/javascript">
	                                      var deathTime = new Date(<%=cal.get(Calendar.YEAR) %>, <%=cal.get(Calendar.MONTH)%>, <%=cal.get(Calendar.DATE) %>, <%=cal.get(Calendar.HOUR_OF_DAY)%>, <%=cal.get(Calendar.MINUTE)%>, <%=cal.get(Calendar.SECOND)%>);	                                      
	                                      var d = <%=cal.get(Calendar.DATE)%>-<%=Calendar.getInstance().get(Calendar.DATE)%>;
	                                      if(d<4){                                    	   
	                                   	   $("#timeLeft").countdown({until: deathTime, compact: true, format: "HMS", layout: "Thời gian còn lại : <strong id='hours'>{hnn}:</strong><strong id='minutes'>{mnn}:</strong><strong id='second'>{snn}</strong>", description: ""});
	                                      }else{
	                                   	   $("#timeLeft").countdown({until: deathTime, compact: true, format: "d", layout: "Thời gian còn lại : <strong id='days'>{dn} ngày</strong>", description: ""});
	                                      }
	                                      $("#countDown").countdown({until: deathTime, compact: true, format: "HMS", description: ""});
	                                                                           
							    </script> 
                                <div class="right">
                                  <!-- AddThis Button BEGIN -->
									<div class="addthis_toolbox addthis_default_style ">
									<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
									<a class="addthis_button_tweet"></a>
									<a class="addthis_button_pinterest_pinit"></a>
									<a class="addthis_counter addthis_pill_style"></a>
									</div>
									<script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script>
									<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-506173b05b7f3f88"></script>
									<!-- AddThis Button END -->
                                </div>
                            </div>
                        </div>
                        <div class="productMainInfoContent clearafter">
                            <div class="left">
                                <h3>Điểm nổi bật:</h3>
                                <div>
                                    <%=deal.getDescription() %>
                                </div>
                            </div>
                            <div class="right">
                                <h3>Điều kiện:</h3>
                                <div>
                                    <%=deal.getDealCondition() %>
                                </div>
                            </div>
                        </div>
                        <div class="productOtherInfo clearafter">
                        	<div class="top">
                        		<h2 class="title">Thông tin chi tiết</h2>
                                <%=deal.getContent() %>
                        	</div>
                        	<div class="left">
                            	<div class="left_inner">                                	
                                    <div class="map">                                                                     
                                    	<h2>Địa chỉ</h2>
                                    	<%
			                            	if(!deal.isDisplayMap()){
			                            		String[] split = deal.getImageMap().split(",");
	                                			if(split.length>0){
	                                				img = split[0];			
	                                			}
	                                
	                                			BlobKey blobKey = new BlobKey(img);
	                                			try{
	                                				img = imagesService.getServingUrl(blobKey);
	                                			}catch(Exception e){
	                                				img = "";
	                                			}
			                            %>
			                          	<div>
                                        	<img src="<%=img %>" />
                                        </div>
			                            <%
			                            	}else{
			                            %>   
			                            <div>
                                        	<div id="map_canvas" style="width: 100%; height: 250px;"></div>
                                        </div>                         
			                            <%
			                            	}
			                            %>                                        
                                    </div>
                                </div>
                            </div>
                            
                            <div class="right">
                            	<div class="right_inner">
                                    <%=deal.getAddressInformation() %>                                    
                                </div>
                            </div>
                        </div>
                        <div class="externalBuyBox clearafter">
                        	<div class="productName left">
                        		<%=deal.getShortName() %>
                        	</div>
                        	<div class="productPrice left">
                        		<span class="oldPrice"><%=nf.format(deal.getPrice()) %>đ [<span>-<%=discount%>%</span>]</span>
                        		<br />
                            	<span class="newPrice"><%=nf.format(deal.getPriceDiscount()) %>đ</span>                                
                            </div>                            
                            <a <%=(deal.getStatus()==2&&deal.getUserAmount()!=deal.getLimit())?"":"onclick='return false;'"%> href="/dang-ky-mua-hang/<%=deal.getDealId() %>" class="viewProduct button green right <%=(deal.getStatus()==2&&deal.getUserAmount()!=deal.getLimit())?"":"disable"%>">Mua</a>
                        </div>                        
                    </div>
                    <div class="right rightSideBar">
                    	<jsp:include page="/elements/right_menu.jsp"/>
                    </div>
                </div>
            </div>        
<script>
	  var geocoder;
	  var map;
	  $(document).ready(function () {
	    geocoder = new google.maps.Geocoder();
	    var latlng = new google.maps.LatLng(-34.397, 150.644);
	    var mapOptions = {
	      zoom: 13,
	      center: latlng,
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    }
	    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
		
		var address = "<%=deal.getMapInformation()%>";
			geocoder.geocode( { 'address': address}, function(results, status) {
			  if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map: map,
					position: results[0].geometry.location
				});
			  } else {
				/* alert("Geocode was not successful for the following reason: " + status); */
			  }
			});
	  });    
</script>
<%
	}
%>
<jsp:include page="/layouts/footer.jsp">
    <jsp:param name="language" value="1" />
</jsp:include>